<template>
    <div>
      <!-- <button @click="ck('用户信息')">用户信息</button>
      <button @click="ck('商品信息')">商品信息</button>
      <div>
        <index v-show="isshow == '用户信息'"></index>
        <ingoodsdex v-show="isshow == '商品信息'"></ingoodsdex>
      </div> -->
      <!-- <router-link to="/home"> home </router-link> -->
      <!-- <router-link :to="{ path: '/home' }"> home </router-link>
      <router-link to="/about"> about </router-link> -->
      <!-- 路由内容出现的位置 -->
      <!-- <router-view></router-view>
      <hr />
      <router-view></router-view> -->
  
      <!-- 编程式的导航  -->
      <!-- <span @click="ck1()">点我展示home</span>------
      <span @click="ck2()">点我展示about</span> -->
      <span @click="ck3('home')">home</span>---------<span @click="ck3('about')"
        >about</span
      >
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  import { abort } from "process";
  import path from "path";
  
  // import paging from "./com/paging.vue";
  export default {
    data() {
      return {
        isshow: "用户信息",
      };
    },
    methods: {
      ck(val) {
        if (val == "用户信息") {
          this.isshow = "用户信息";
        } else {
          this.isshow = "商品信息";
        }
      },
      // ck1() {
      //   this.$router.push("/home");
      // },
      // ck2() {
      //   this.$router.push("/about");
      // },
      ck3(path1) {
        // this.$router.push(`/${path1}`);
        // this.$router.push({ path: `/${path1}` });
        // this.$router.push({ name: path1 });
      },
    },
    created() {
      this.ck;
    },
    components: {},
  };
  </script>
  
  <style>
  </style>
  
  
  
  
  
  
   <!-- <template>
    <div>
      <div id="cor">
        <div class="app">我是一号</div>
        <div class="ad">我是二号</div>
        <div class="ac">我是全局</div>
      </div>
      <div class="transition">
        <button type="button" @click="isVisible = !isVisible">TOGGLE</button>
        <transition name="fade">
          <h1 v-show="isVisible">Hello, World!</h1>
        </transition>
      </div>
      <div>
        <button @click="ck">点击我</button>
        <transition>
          <h1 v-if="show" class="animate__animated animate__swing">
            我是动态库动画
          </h1>
        </transition>
      </div>
      <button @click="add">点击</button>
      <button @click="add2">点击</button>
    </div>
  </template>
  
  <script>
  import { axiosApi } from "./api";
  import "animate.css";
  import "axios";
  // import axios from "axios";
  export default {
    data() {
      return {
        isVisible: true,
        show: true,
        status: 0,
      };
    },
    methods: {
      ck() {
        this.show = !this.show;
        console.log(this.show);
      },
      add() {
        axiosApi.get1().then((val) => {
          console.log(val);
        });
      },
      add2() {
        axiosApi.post1(this.from).then((val) => {
          console.log(val);
        });
      },
    },
    mounted() {},
    created() {
      // axios
      //   .get(
      //     "https://logcoll-v2.ffquan.cn/sendEvent?event_time=1679015692683&event_type=click&event_id=shouye&refer=&url=https%3A%2F%2Fwww.shentehui.com%2Findex.php%3Fr%3Dindex%2Fwap&path=shouye/fenlei/jgArea/jgitem&extra=%7B%22temp_id%22%3A%221%22%2C%22url%22%3A%22%2Fbrandsales%22%2C%22index%22%3A%224%22%2C%22title%22%3A%22%E5%93%81%E7%89%8C%E7%89%B9%E5%8D%96%22%7D&properties=%7B%22px%22%3A%221707x1067%22%2C%22ua%22%3A%22mozilla%2F5.0%20(windows%20nt%2010.0%3B%20win64%3B%20x64)%20applewebkit%2F537.36%20(khtml%2C%20like%20gecko)%20chrome%2F111.0.0.0%20safari%2F537.36%20edg%2F111.0.1661.41%22%2C%22lang%22%3A%22zh%22%2C%22os%22%3A%22pc%22%2C%22device_id%22%3A%226278_1679015661346%22%2C%22tra%22%3Afalse%7D&uid=96823&project=cmsWap"
      //   )
      //   .then((res) => {
      //     console.log(res);
      //   });
      // axios({
      //   url: "https://logcoll-v2.ffquan.cn/sendEvent?event_time=1679015692683&event_type=click&event_id=shouye&refer=&url=https%3A%2F%2Fwww.shentehui.com%2Findex.php%3Fr%3Dindex%2Fwap&path=shouye/fenlei/jgArea/jgitem&extra=%7B%22temp_id%22%3A%221%22%2C%22url%22%3A%22%2Fbrandsales%22%2C%22index%22%3A%224%22%2C%22title%22%3A%22%E5%93%81%E7%89%8C%E7%89%B9%E5%8D%96%22%7D&properties=%7B%22px%22%3A%221707x1067%22%2C%22ua%22%3A%22mozilla%2F5.0%20(windows%20nt%2010.0%3B%20win64%3B%20x64)%20applewebkit%2F537.36%20(khtml%2C%20like%20gecko)%20chrome%2F111.0.0.0%20safari%2F537.36%20edg%2F111.0.1661.41%22%2C%22lang%22%3A%22zh%22%2C%22os%22%3A%22pc%22%2C%22device_id%22%3A%226278_1679015661346%22%2C%22tra%22%3Afalse%7D&uid=96823&project=cmsWap",
      //   methods: "GET",
      // }).then((res) => {
      //   console.log(res);
      // });
      // 我是全局
      this.$axios({
        url: "https://logcoll-v2.ffquan.cn/sendEvent?event_time=1679015692683&event_type=click&event_id=shouye&refer=&url=https%3A%2F%2Fwww.shentehui.com%2Findex.php%3Fr%3Dindex%2Fwap&path=shouye/fenlei/jgArea/jgitem&extra=%7B%22temp_id%22%3A%221%22%2C%22url%22%3A%22%2Fbrandsales%22%2C%22index%22%3A%224%22%2C%22title%22%3A%22%E5%93%81%E7%89%8C%E7%89%B9%E5%8D%96%22%7D&properties=%7B%22px%22%3A%221707x1067%22%2C%22ua%22%3A%22mozilla%2F5.0%20(windows%20nt%2010.0%3B%20win64%3B%20x64)%20applewebkit%2F537.36%20(khtml%2C%20like%20gecko)%20chrome%2F111.0.0.0%20safari%2F537.36%20edg%2F111.0.1661.41%22%2C%22lang%22%3A%22zh%22%2C%22os%22%3A%22pc%22%2C%22device_id%22%3A%226278_1679015661346%22%2C%22tra%22%3Afalse%7D&uid=96823&project=cmsWap",
        methods: "GET",
      }).then((res) => {
        console.log(res);
      });
    },
    components: {},
  };
  </script>
  
  <style lang="less" scoped>
  // 自定义颜色，全局使用
  @maincor: red;
  #cor {
    width: 300px;
    height: 300px;
    background-color: @maincor;
    // 这就是嵌套  用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。
    .app {
      color: aqua;
    }
    .ad {
      color: blue;
    }
    .ac {
      color: @red;
    }
  }
  h1 {
    background-color: aqua;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 2s linear;
  }
  .fade-enter,
  .fade-leave-to {
    transform: anslateX(100vw);
    opacity: 0;
  }
  // .fade-leave-active {
  //   animation: animation1 2s reverse;
  // }
  // @keyframes animation1 {
  //   from {
  //     transform: translateX(-100vw);
  //   }
  //   to {
  //     transform: translateX(0);
  //   }
  // }
  </style> -->
  
  
  